<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>即时通讯</title>
<script th:src="@{/js/jquery-2.1.1.min.js}"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
    <h2>即时通讯</h2>
    <form id="cvseaForm">
        <textarea rows="4" cols="60" name="text" id="content"></textarea>
        <input type="submit" value="发送" />
    </form>
    <input type="button" value="断开连接" id="stop" />
    <ul id="response"></ul>

    <script th:inline="javascript">
        var sock = new SockJS("endpointChat");
        var stomp = Stomp.over(sock);
        stomp.connect("guest", "guest", function(frame) {
            stomp.subscribe("/user/queue/notifications", handleNotification);
        });

        $("#cvseaForm").submit(function(e) {
            e.preventDefault();
            if(sock)
            var content = $("#content").val();
            sendSpittle(content);
        });

        function handleNotification(message) {
            $("#response").append("<li>Re:" + message.body + "</li>");
        }

        function sendSpittle(message) {
            stomp.send("/chat", {}, message);
        }

        $("#stop").click(function() {
            sock.close();
        });
    </script>
</body>
</html>